<template>
	<view>
		<!-- #ifndef MP-ALIPAY -->
		<nav-bar title="圆弧进度图"></nav-bar>
		<!-- #endif -->
		
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-m-t-30 u-chart">
			<view class="u-title u-p-20">
				<u-section title="圆弧进度图" line-color="#F74963" :right="false"></u-section>
			</view>
			<view class="u-canvas">
				<canvas canvas-id="canvasArcbar1" id="canvasArcbar1" class="charts3"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import uChartsList from '@/style/js/uCharts.data.js';
	var _self;
	var canvaArcbar1=null;
		
	export default {
		components: {
		},
		data() {
			return {
				cWidth3:'',//圆弧进度图
				cHeight3:'',//圆弧进度图
				arcbarWidth:'',//圆弧进度图，进度条宽度,此设置可使各端宽度一致
				pixelRatio:1,
			}
		},
		onLoad(e) {
			_self = this;
			this.cWidth3=uni.upx2px(250);//这里要与样式的宽高对应
			this.cHeight3=uni.upx2px(250);//这里要与样式的宽高对应
			this.arcbarWidth=uni.upx2px(24);
			this.getServerData();
		},
		methods: {
			getServerData(){
				// uni.request({
				// 	url: 'https://www.ucharts.cn/data.json',
				// 	data:{
				// 	},
				// 	success: function(res) {
				// 		console.log(res.data.data)
				// 		let Arcbar1={series:[]};
				// 		//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// 		Arcbar1.series=res.data.data.Arcbar1.series;
				// 		_self.showArcbar("canvasArcbar1",Arcbar1);
				// 	},
				// 	fail: () => {
				// 		_self.tips="网络错误，小程序端请检查合法域名";
				// 	},
				// });
				
				//本地数据模拟运行
				let Arcbar1={series:[]};
				Arcbar1.series = uChartsList.list.data.Arcbar1.series;
				_self.showArcbar("canvasArcbar1",Arcbar1);
				console.log(Arcbar1.series)
			},
			showArcbar(canvasId,chartData){
				canvaArcbar1=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:{show:false},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth3*_self.pixelRatio,
					height: _self.cHeight3*_self.pixelRatio,
					dataLabel: true,
					title: {
						name: Math.round(chartData.series[0].data*100)+'%',//这里我自动计算了，您可以直接给任意字符串
						color: chartData.series[0].color,
						fontSize: 25*_self.pixelRatio
					},
					subtitle: {
						name: chartData.series[0].name,//这里您可以直接给任意字符串
						color: '#666666',
						fontSize: 15*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'default',
							width: _self.arcbarWidth*_self.pixelRatio,//圆弧的宽度
						}
					}
				});
			}
			
		},
		onPageScroll(e) {
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	}
</script>

<style>
	page{background:#F2F2F2;width: 750upx;overflow-x: hidden;}
	.u-chart{background-color: #fff;display:flex; flex-direction:column !important;}
	.u-title{width: 750rpx;}
	.u-canvas{width: 750upx;height: 250upx;position: relative;}
	.charts{width: 750upx; height:500upx;background-color: #FFFFFF;}
	.charts3 {position: absolute;width: 250upx;height: 250upx;}
</style>
